<template>
  <!--height 固定表头-->
  <!--border 边框-->
  <div class="list-container">
    <!-- <el-form class="search-panel" v-model="searchData" :inline="true">
      <el-form-item label-width="90px" class="search-input" label="输入搜索：">
        <el-input
          v-model="searchData.name"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="90px" class="search-time" label="查询时间：">
        <el-date-picker
          style="width: 250px"
          v-model="searchData.startToEnd"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form> -->
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button @click="importWorker" type="primary" icon="el-icon-plus">人员建档</el-button>
        <!-- <el-button @click="importWorker">人员建档<i class="el-icon-plus"/></el-button> -->
      </el-row>
      <el-table ref="filterTable" :data="tableData" style="width: 100%">

        <el-table-column label="序号" type="index" fit width="55px" align="center">
        </el-table-column>
        <!--    姓名-->
        <el-table-column prop="name" min-width="70" label="姓名" fit align="center">
        </el-table-column>
        <!--    性别-->
        <el-table-column prop="gender" width="55" label="性别" fit align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.gender==0">女</div>
            <div v-else>男</div>
          </template>
        </el-table-column>
        <!--    民族 -->
        <el-table-column prop="clan" min-width="60" label="民族" fit align="center">
        </el-table-column>
        <!--    出生日期-->
        <el-table-column prop="birthDate" min-width="100" label="出生日期" fit align="center">
        </el-table-column>
        <!--    住址-->
        <el-table-column prop="hometown" min-width="200" label="籍贯" fit align="center">
        </el-table-column>
        <!--    身份证号-->
        <el-table-column prop="certificateNumber" min-width="110" label="身份证号" fit align="center">
        </el-table-column>
        <!--    扫描日期-->
        <el-table-column prop="createTime" min-width="110" label="扫描日期" fit align="center">
        </el-table-column>
        <!--    操作-->
        <el-table-column label="操作" min-width="135" fixed="right" fit align="center">
          <template slot-scope="scope" align="center">
            <el-button
              type="text"
              @click="Approach(scope.row.id)"
              icon="el-icon-circle-plus-outline"
              >进场
            </el-button>
            <el-button type="text" @click="deleteRow(scope.row.id)"
            icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import {quickFillingList,deletePersonnel} from "@/api/worker.js"
export default {
  data() {
    return {
      searchData: {
        name: "",
        startToEnd: "",
      },
      tableData: [],
      currentPage: 1,
      selectTime: 0,
      pageSize: 10,
      totalData: 0,
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
      quickFillingList(this.currentPage,this.pageSize).then(res=>{
        console.log(res);
        this.tableData = res.data.data.records
        this.totalData = res.data.data.total
      })
    },
    importWorker(){
      this.$router.push({ path:'/quickFiling/workerImport' })
    },
    onSubmit() {},
    //进场
    Approach(id) {
      this.$router.push({ path:'/quickFiling/approach',query:{id:id} })
    },
    deleteRow(id) {
      this.$confirm("此操作将永久删除该用户，是否继续？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePersonnel([id]).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getList()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //时间选择器
    chooseTimeRange() {
      console.log(this.selectTime); // ["2019-08-01", "2019-09-01"] 结果为数组
    },

    //pageSize每页条数改变时
    handleSizeChange(val){
      this.pageSize=val
      this.getList()       
    },
    //currentPage当前页改变时
    handleCurrentChange(val) {
      this.currentPage=val
      this.getList()      
    }
  },
};
</script>